<template>
  <my-div class="create">
    <head></head>
    <div class="head">
      <image style="width:100px;height:60px;" src="root:img/create/logo@2x.png"></image>
      <my-text night_color="#fff" day_color="color:rgba(19,32,63,1)" :text="$t('login.create_wallet')" style="font-size:36px;margin-top:24px;"></my-text>
    </div>
    <div class="create-form">
      <div class="login-input">
        <input type="text" :placeholder="$t('wallet.id_card')" class="login-input-inner" v-model="form.name" @blur="check_name(form.name)" />
      </div>
      <div class="login-input">
        <input type="password" :placeholder="$t('wallet.pw')" class="login-input-inner" @input="check_pw(form.pw)" v-model="form.pw" />
        <text class="view_pw" style="font-size:28px;color:rgba(19,32,63,1)">{{pw_strength}}</text>
      </div>
      <div class="login-input">
        <input :type="input_type" :placeholder="$t('wallet.r_pw')" class="login-input-inner" v-model="form.r_pw" />
        <image class="view_pw" style="width:40px;height:20px;" src="root:img/create/biyan@2x.png" @click="toggle_type"></image>
      </div>
    </div>
    <div class="login-btn" @click="create_wallet" >
      <text style="color:#ffffff;font-size:24px;text-align: center;line-height:74px;
      ">{{$t('login.create')}}</text>
    </div>
  </my-div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      input_type:'password',
      pw_strength:'',
      deviceHieght:WXEnvironment.deviceHeight,
      form:{
        name:'',
        pw:'',
        r_pw:''
      }
    }
  },
  methods: {
    // 检测用户名是否重复
    check_name(name){
       this.$http.getSilent('wallet/checkUserName',{username:name},(res)=>{
         if(!name) return 
         if(res.have) return this.toast('用户名已存在')
       })
    },
    // 切换表单类型
    toggle_type(){
      if(this.input_type === 'text'){
        this.input_type = 'password'
      }else {
        this.input_type = 'text'
      }
    },
    // 检测密码强度
    check_pw(val){
      var aLvTxt = ['','低','中','高'];
      var lv = 0;
      if(val.match(/[a-z]/g)){lv++;}
      if(val.match(/[0-9]/g)){lv++;}
      if(val.match(/(.[^a-z0-9])/g)){lv++;}
      if(val.length < 6){lv=0;}
      if(lv > 3){lv=3;}
      this.pw_strength = aLvTxt[lv]
    },
    valid_form(){

    },
    // 创建钱包
    create_wallet(){
      const device = weex.requireModule('device')
      if(!this.form.name) return this.toast(this.$t('common.null')+this.$t('wallet.id_card'))
      if(!this.form.pw) return this.toast(this.$t('common.null')+this.$t('wallet.pw'))
      if(!this.form.r_pw) return this.toast(this.$t('common.please')+this.$t('wallet.r_pw'))
      if(this.form.pw!==this.form.r_pw) return this.toast(this.$t('common.equal'))
      const pref = weex.requireModule('pref')
      const ac = pref.get('account') || {}
      // const l = Object.keys(ac)
      const p = {
        name:this.form.name,
        password:this.form.pw,
        device_id:device.deviceId(),
      }
      const key = 'ac'+ new Date().getTime()
      this.$http.getSilent('wallet/checkUserName',{username:this.form.name},(data)=>{
            if(data.have) return this.toast('用户名已存在')
            this.$http.post('wallet/createWallet',p,(res)=>{
            ac[key] = {user:this.form,wallet:res.result,is_sure:false}
            pref.set('account',ac)
            pref.setString('current_user_key',key)
            this.toast(res.msg)
            this.push('root:pages/login/word.js',{master_key:res.result&&res.result.master_key,master_seed:res.result.master_seed})
          })
       })
      
    }
  }
}
</script>
<style scoped>
.create{
  width: 750px;
  flex: 1;
  /* position: absolute; */
  /* top: 0;
  bottom: 0;
  left: 0; */
}
.head{
  margin-top: 80px;
  width: 690px;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.create-form{
  margin-top: 92px;
}
.login-input{
  width: 690px;
  margin-left: 30px;
  height: 90px;
  border-bottom-width: 1px;
  border-bottom-color: rgba(233,233,233,1);
  border-bottom-style: solid;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.login-input-inner{
  width: 620px;
  font-size: 28px;
  height: 90px;
}
.login-btn{
  width: 690px;
  height: 80px;
  background-color: rgba(70,120,245,1);
  margin-top: 100px;
  border-radius: 10px;
  position: absolute;
  bottom: 140px;
  left: 30px;
}
</style>
